<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ page import="com.coordinate.map.MapKey" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<title>Google translation test</title>
<head>	

<% 
String lKey = MapKey.key(request.getServerName());

out.print("<script src=\"http://maps.google.com/maps?file=api&amp;v=2&amp;key=" + lKey +
            "\" type=\"text/javascript\" >");
%>
</script>
<script type="text/javascript" src="http://www.google.com/jsapi">
  
</script>
<style type="text/css">
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 40%; }
	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
	#sortable li span { position: absolute; margin-left: -1.3em; }
	</style>


<link type="text/css" href="/googly/jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="/googly/jquery/js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="/googly/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript" src="/googly/jquery/js/jquery.corner.js"></script>

	<script type="text/javascript">
	$(function() {
		$("#TabGadget").tabs();
                $("#TabGadget").tabs({ fx: { opacity: 'toggle' } }); 
                $("#TabGadget").tabs('option', 'fx', { opacity: 'toggle' , duration: 'fast'}); 
		//$("#composeMsgGadget").corner('round 28px');
		$("#textMsgDatePicker").datepicker();
		$("#radiotab").tabs();
        $("#radiotab").tabs({ fx: { opacity: 'toggle' } }); 
        $("#radiotab").tabs('option', 'fx', { opacity: 'toggle' , duration: 'fast'});
		
              
	});
</script>


<script type="text/javascript">
     var map;
     var lTime = 0;
     var g_LangInit = false;

      google.load("language", "1");

    function loadMap() 
    {

      if (GBrowserIsCompatible()) 
      {
         map = new GMap2(document.getElementById("map"));
         map.setCenter(new GLatLng(22.7, 77.2), 5);
         //panToPlaceAndAddMarker(pLat,pLng,pPlaceName,pUserPhotoUrl)
        var center = new GLatLng(48.89364,  	2.33739);
        map.setCenter(center,5);
        map.setUIToDefault();
      
     }
    }


function
translateToArabia()
{
 var lAngliciaTxt = document.getElementById('anglicia').value;
 var translated = document.getElementById('arabia');

 translated.value = ""; 

 google.language.detect(lAngliciaTxt, function(result) {
        if (!result.error && result.language) {
          google.language.translate(lAngliciaTxt, result.language, "ar",
                                    function(result) {
            
	    if (result.translation) {
	      // alert(result.translation);
              translated.value = result.translation;
            }
	    else
	    {
		    alert("Failed to translate to Arabic" + result);
	    }
          });
        }
      });
 
}

var g_message = "text";
var g_textmsg_html = "";


function showTextMessageContainer()
{
	if(g_message == "text")
		{
		//do nothing
		}	
		else
			{
			  //alert("wll move to text");
	          g_message = "text";
	          document.getElementById('composeMsgGadget').innerHTML = g_textmsg_html;
	          alert(g_textmsg_html);
	          $("#textMsgDatePicker").datepicker('show');
	          
			}
	
}



function showVoiceMessageContainer()
{

	
	  lVoiceMsgBoxHtml = "<form>" 
          + "<table align=center>"
          + "<tr><th><font color=white>Voice Message Upload</font></th></tr>"
          + "<tr><td> <font color=white>Select a Voice message:</font></td><td><input type=file value=Select a Voice Recorded file></td></tr>"
          +"</table>"
          + "<div style='background-color: #ffffff;padding-top: 5px;padding-bottom: 5px;' ><input type=checkbox name=email value=e-mail><font color=brown>E-mail <input type=checkbox name=sms value=sms> SMS <input type=checkbox name=voice value=voice> Voice Calls  <input type=checkbox name=coordframe value=coordframe> CoordFrame.</font></div>"
          +"</form>";

	if(g_message == "voice")
		{
		}//do nothing
		else
			{
			 // alert("wll move to voice");
	          g_message = "voice";
	          g_textmsg_html = document.getElementById('composeMsgGadget').innerHTML;
	          document.getElementById('composeMsgGadget').innerHTML =  lVoiceMsgBoxHtml;
			}
	
	/*if(document.getElementById('voicemsg').checked == true )
		alert("VOICE MSG is alrady checked");
	else
		alert("Will change to VOICE MSG display");*/
   
     
    
     


}

</script>

</head>
<body onload="loadMap()" onunload="GUnload()">
<div id="TabGadget" style="align: center;bottom: 2px;top: 0px;left:2px;width: 700px; height: 520px">

    <ul>
	    <li><a href="#mapcontainer"><font size=2>Select Locations</font></a></li>
        <li><a href="#composeMsgContainer"><span><font size=2>Compose </font></span></a></li>
        
    </ul>
   <div id="mapcontainer"  style="padding-left:0px;bottom: 2px;padding-top: 0px;left:2px;width: 700px; height: 470px" >
  
    <div id="map"  style="float: left;padding-left:0px;bottom: 2px;top: 2px;left:2px;width: 540px; height: 470px" >
     
    </div>
    <div id="locationsList" style="float: right;background-color: white;padding-left:2px;top: 0px;left:5px; height: 220px;width: 150px;overflow:auto;">
    <font size=2 color=brown><u><b>Locations</b></u></font>
   </div> 
   <div id="searchResults" style="float: right;background-color: white;padding-left:2px;top: 0px;left:0px; height: 220px;width: 150px;overflow:auto;">
    <font size=2 color=brown><u><b>Search Results</b></u></font>
   </div> 
</div>
    <div id="composeMsgContainer"  style="bottom: 0px;top: 0px;left:0px;width: 600px; height: 310px" >
	    <div id="composeMsgBanner" style="top: 0px;left: 0px;float: left;background-color: #f6a828;padding-top: 0px;padding-bottom: 0px;"><font color="white" size="3"><b>&nbsp; Compose Message  </b>&nbsp;</div>
	   <div style="clear:both;"></div>
       <div id="radiotab">
	   <ul>
	    <li><a href="#textMessageContainer"><font size=2>Text Message</font></a></li>
        <li><a href="#voiceMessageContainer"><span><font size=2>Voice Message</font></span></a></li>
          <li><a href="#videoMessageContainer"><span><font size=2>Video Message</font></span></a></li>
       </ul>	
	  
	   <div id="textMessageContainer">
	     <form name="txtMsgForm" action="/TextMsgService" method="POST"  >
	   		<table  bgclor="#f6a828" style="top:0px" cellspacing=0 cellpadding=0>
	   		 <tr><td align=left><font color=brown size=4><b>Send a Text Message </font></th></tr>
	   		<tr><td><font size=2 color=brown>Subject:</font></td></tr>
	   		<tr><td><input type=text name="subject" size=30 maxlength="100"></td></tr>
				<tr><td><font size=2 color=brown>English:</font></td></tr>
				<tr><td>
				<textarea id="anglicia" name="anglicia" rows="2" cols="50"></textarea>
				</tr>
				<tr><td><font size=2 color=brown>Arabic:</font></td></tr>
				<tr><td>
				<textarea id="arabia" name="arabia"rows="2" cols="50"></textarea>
				</td></tr>
				<tr><td colspan=2 ><input type=button value="Translate to Arabic" onClick="translateToArabia()">
				</td></tr>
				
				<tr><td> <div style="clear:both;"></div>
	 				<div id="channelSelectGadget" style="top: 1px;background-color: #ffffff;padding-top: 1px;padding-bottom: 1px;"><input type=checkbox name=email value=e-mail><font color=brown>E-mail <input type=checkbox name=sms value=sms> SMS <input type=checkbox name=fax value=fax> Fax <input type=checkbox name=voice value=voice> Voice Calls  <input type=checkbox name=coordframe value=coordframe> CoordFrame.</font></div></td></tr>
	 			<tr><td> <font size=2 color=brown>Pick a Date and Time :</font><input type=text  id="textMsgDatePicker">
	 				<input type=submit  id="txtMsgSubmit" value="Send Message"></td></tr>
	 					 		</table>		
	 		</form>
	   </div>
	  <div id="voiceMessageContainer">
	  
	  <form name="VoiceMsgForm" encType="multipart/form-data" action="/VoiceMsgService" method="POST">
          <table align=center>
          <tr><td ><font color=brown size=4><center><b>Voice Message Upload</b></center></font></th></tr>
          	<tr><td  ><font size=2 color=brown>Subject:</font></td>
	   		<td><input type=text name="subject" size=30 maxlength="30"></td></tr>
          <tr><td> <font color=brown>Select a Voice message:</font></td><td><input type=file value="Select a Voice Recorded file" name="vmFile"></td></tr>
          <tr><td colspan=2> <div style='background-color: #ffffff;padding-top: 5px;padding-bottom: 5px;' ><input type=checkbox name=email value=e-mail><font color=brown>E-mail <input type=checkbox name=sms value=sms> SMS <input type=checkbox name=voice value=voice> Voice Calls  <input type=checkbox name=coordframe value=coordframe> CoordFrame.</font></div></td></tr>
          <tr><td><input type="submit" name="VmSubmit" value="Submit Video Message"></input></td></tr>
          </table>
         
          
      </form>
	  </div>
	   <div id="videoMessageContainer">
	  
	  <form name="VideoMsgForm" encType="multipart/form-data" action="/VideoMsgService" method="POST">
          <table align=center>
          <tr><td ><font color=brown size=4><center><b>Video Message Upload</b></center></font></th></tr>
          	<tr><td  ><font size=2 color=brown>Subject:</font></td>
	   		<td><input type=text name="subject" size=30 maxlength="30"></td></tr>
          <tr><td> <font color=brown>Select a Voice message:</font></td><td><input type=file value="Select a Voice Recorded file" name="vmFile"></td></tr>
          <tr><td colspan=2> <div style='background-color: #ffffff;padding-top: 5px;padding-bottom: 5px;' ><input type=checkbox name=email value=e-mail><font color=brown>E-mail <input type=checkbox name=sms value=sms> SMS </font></div></td></tr>
          <tr><td><input type="submit" name="VmSubmit" value="Submit Voice Message"></input></td></tr>
          </table>
         
          
      </form>
	  </div>
	  </div>
	   
    
	

</div>
	


</body>

</html>


